<template>
	<render-less v-model="tags">
		<div slot-scope="{tags,removeTag,attrs,listeners}" class="tag-input">
			<span v-for="(tag,index) in tags" :key="index">
				<button type="button" class="tags-input-remove" @click="removeTag(tag)">&times;</button>{{tag}}
			</span>
			<input type="text" class="tags-input-text" placeholder="Add tag..." v-bind="attrs" v-on="listeners">
		</div>
	</render-less>
</template>

<script>
	import RenderLess from '@/components/renderLess'
	import mixin from '@/mixins/removeLoading'
	export default {
		name: 'RederLess',
		components: {
			RenderLess
		},
		mixins: [mixin],
		data(){
			return{
				tags: ['Testing', 'Design']
			}
		}
	}
</script>
<style>
	.tags-input {
	  display: flex;
	  flex-wrap: wrap;
	  background-color: #fff;
	  border-width: 1px;
	  border-radius: .25rem;
	  padding-left: .5rem;
	  padding-right: 1rem;
	  padding-top: .5rem;
	  padding-bottom: .25rem;
	}
	
	.tags-input-tag {
	  display: inline-flex;
	  line-height: 1;
	  align-items: center;
	  font-size: .875rem;
	  background-color: #bcdefa;
	  color: #1c3d5a;
	  border-radius: .25rem;
	  user-select: none;
	  padding: .25rem;
	  margin-right: .5rem;
	  margin-bottom: .25rem;
	}
	
	.tags-input-tag:last-of-type {
	  margin-right: 0;
	}
	
	.tags-input-remove {
	  color: #2779bd;
	  font-size: 1.125rem;
	  line-height: 1;
	}
	
	.tags-input-remove:first-child {
	  margin-right: .25rem;
	}
	
	.tags-input-remove:last-child {
	  margin-left: .25rem;
	}
	
	.tags-input-remove:focus {
	  outline: 0;
	}
	
	.tags-input-text {
	  flex: 1;
	  outline: 0;
	  padding-top: .25rem;
	  padding-bottom: .25rem;
	  margin-left: .5rem;
	  margin-bottom: .25rem;
	  min-width: 10rem;
	}
	
	.py-16 {
	  padding-top: 4rem;
	  padding-bottom: 4rem;
	}
</style>
